{% if customer.gender %}
{% assign gender = customer.gender %}
{% else %}
{% assign gender = 0 %}
{% endif %}

{% if customer.birthday %}
{% assign birthday = customer.birthday %}
{% else %}
{% assign birthday = '' %}
{% endif %}

{% if isTemplate != true %}
{% include account_nav %}
{% endif %}
<div class="container_wrapper" id="account_profilechange">
  <h1 class="title">{{lang.account.default.profile | upcase }}</h1> 


  <form class="mo-form" id='profile-form'>

    <div class="mo-form-item" name='email'>
      <div class="mo-form-item-value">
        <input class="mo-form-input"  placeholder="{{lang.account.form.email}}" value='{{customer.email}}' type="text" name="email" id="" />
      </div>
    </div>
    <div class="mo-form-item hide" id="update_order_email">
      <label class="checkbox_label mo-checkbox" style="text-align: left;padding: 0;" for="update_email">
        <input class=" mo-checkbox_input order_checkbox insurance_checkbox" type="checkbox" name="update_order_email" id="update_email" value="2" />
        <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox%}</span>{{lang.customer.update_order_email}}
    </label>
    </div>
    <div class="mo-form-item" name='first_name'>
      <div class="mo-form-item-value">
        <input class="mo-form-input" placeholder="{{lang.account.form.first_name}}" value='{{customer.first_name}}' type="text" />
      </div>
    </div>
    <div class="mo-form-item" name='last_name'>
      <div class="mo-form-item-value">
        <input class="mo-form-input" placeholder="{{lang.account.form.last_name}}" value='{{customer.last_name}}' type="text" name="" id="" />
      </div>
    </div>
    
    {% if storeConfig.checkout_contact %}
    <div class="mo-form-item" name='contact'>
      <div class="mo-form-item-value">
        <input class="mo-form-input" placeholder="{{ storeConfig.other_concat  | default : 'Whatsapp / Skype'  }}" value='{{customer.contact}}' type="text" name="" id="" />        
      </div>
    </div>
    {% endif %}
    

    <div class="mo-form-item" name='gender'>
      <div class="mo-form-item-value">
        <label class="mo-form-select">
          <select class="mo-form-unselect" id='gender'>
            <option value='0'>{{lang.account.profile_change.gender.secrecy}}</option>
            <option value='1'>{{lang.account.profile_change.gender.male}}</option>
            <option value='2'>{{lang.account.profile_change.gender.female}}</option>
          </select>
          <div class="mo-edge"></div>
        </label>
      </div>
    </div>

    <div class="mo-form-item" name='birthday'>
      <div class="mo-form-item-value">
        <label class="birthday-warp" id="birthday-input">
          <input class="mo-form-input mo-form-input-none" placeholder="{{lang.account.form.birthday.day}}" style="width: 80px" name="dd" type="text" maxlength="2"  min="1" max="99" oninput="if(value>31)value=31" />
          <span style="color:#1d1f21">/</span>
          <input class="mo-form-input mo-form-input-none" placeholder="{{lang.account.form.birthday.month}}" style="width: 80px" name="mm" type="text" maxlength="2" min="1" max="99" oninput="if(value>12)value=12" />
          <span style="color:#1d1f21">/</span>
          <input class="mo-form-input mo-form-input-none" placeholder="{{lang.account.form.birthday.year}}" style="width: 100px" name="yyyy" type="text" maxlength="4"  min="1" max="9999" />
        </label>
      </div>
    </div>
    <div class="mo-form-item checkout-main">
        <label class="checkbox_label mo-checkbox" for="sub_checkbox">  
            <input class=" mo-checkbox_input order_checkbox insurance_checkbox" {% if customer.is_sub == 1 %}checked{% endif %} type="checkbox" name="sub_checkbox" value="1" id="sub_checkbox"/>
            <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox %}</span>{{lang.account.create.sub}} 
        </label>
    </div>
    <div class="mo-form-item">
      <div class="mo-form-item-value">
        <a href="javascript:;" id='confirm' class="main_btn form_btn">{{lang.account.profile_change.submit | upcase }}</a>
      </div>
    </div>
    <div class="back-box">
      <a href="/account">
        <!-- {% include icon_account_back ,width:'32',height:'28' %} -->
        <svg t="1642570712144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24369" width="24" height="24"><path d="M85.333333 512.042667l320-256v213.333333H1024v85.333333H405.333333v213.333334z" p-id="24370"></path></svg>
        <span>{{ lang.account.default.account | upcase }}</span>
      </a>
    </div>
  </form>
</div>

<script type="text/javascript">

  (function () {
    const birthday = '{{birthday}}';
    const gender = '{{gender}}';
    $('#gender').val(gender);

    const birthdayWarp = $("#birthday-input");
    const birthdayInputs = birthdayWarp.children("input");

    const dInput = $(birthdayInputs[0]);
    const mInput = $(birthdayInputs[1]);
    const yInput = $(birthdayInputs[2]);
    if (birthday) {
      const date = new Date(birthday * 1000);
      dInput.val(date.getDate())
      mInput.val(date.getMonth() + 1)
      yInput.val(date.getFullYear())
    }

    function birthdayFocus(name, event) {
      if (dInput.val().length < 2) {
        return dInput.focus();
      }
      if (mInput.val().length < 2) {
        return mInput.focus();
      }
      if (yInput.val().length < 4) {
        return yInput.focus();
      }
    }

    function birthdayNextFocus(name, value) {
      if (name === "yyyy" && !value) {
        return mInput.focus();
      }
      if (name === "mm" && !value) {
        return dInput.focus();
      }
      if (name === "dd" && value.length >= 2) {
        return mInput.focus();
      }
      if (name === "mm" && value.length >= 2) {
        return yInput.focus();
      }
    }

    for (let i = 0; i < birthdayInputs.length; i++) {
      const element = birthdayInputs[i];
      element.addEventListener("focus", function (event) {
        const { name, value } = event.target;
        
      });

      element.addEventListener("input", function (event) {
        event.target.value=event.target.value.replace(/[^\d]/g,'')
      });
      element.addEventListener("keyup", function (event) {
        const { name, value } = event.target;
        if (((value && event.keyCode !== 8) || (!value && event.keyCode === 8)) && ![37, 39].includes(event.keyCode)) {
          birthdayNextFocus(name, value);
        }
      });
    }

    function validatorBirthday(val) {
      if (val.split(',').indexOf('') === -1) {
        return true;
      } else {
        return false
      }
    }

    function filterDate(val){
      var intVal = parseInt(val);
      return intVal < 10 ? "0"+intVal:intVal;
    }
  
    const rules = {
      first_name: [{ required: true, message: `{{lang.account.ruls.first_name}}` }],
      last_name: [{ required: true, message: `{{lang.account.ruls.last_name}}` }],
      email: [{ required: true, message: `{{lang.account.ruls.email}}` }],
      birthday: [{ validator:function(value, rules,callback){
                    if(!value.split(',').indexOf('')){
                        return callback("{{lang.account.ruls.birthday}}");
                    }
                    const birthday = value.split(',');
                   const numberDay = Number(birthday[2]+(filterDate(birthday[1]))+(filterDate(birthday[0])));
                   const numberCuurentDay = Number(moi.formatZoneDate(new Date().getTime()/1000,'YYYYmmdd') );
                   if(numberCuurentDay < numberDay){
                    return callback(`{{lang.general.invalid_date}}`);
                   }

      }}],
    };


    const form = moi.form("#profile-form", rules);
    $("input[name='email']").keyup(function(){
      if($(this).val() !== "{{customer.email}}"){
        $("#update_order_email").show()
      }else{
        $("#update_order_email").hide()
      }
    })
    $("#confirm").click(function () {
      const is_sub = $("#sub_checkbox").get(0).checked;
      const update_order_email = $("input[name='update_order_email']").get(0).checked;
      if (form.allVerify()) {
        const params = moi.paramsValueString(form.allValue());
        const gender = $('#gender').val();
        const birthday = params.birthday.split(',');
        params.gender = gender;
        params.birthday = `${birthday[2]}-${birthday[1]}-${birthday[0]}` 
        const load = moi.nodeShowLoading(this);
        params["is_sub"] = is_sub ? 1 : 0;
        params["update_order_email"] = update_order_email ? 1 : 0;
        moi.ajax({
          url: '/account/profile',
          type: 'put',
          data: JSON.stringify(params),
          complete: function () {
            load.close();
          },
          success: function (data) {
            if (data.code === 4028) {
               form.showError(0,`{{lang.customer.email_exist}}`)
               return 
            }

            if (!data.code) {
               moi.message({ 
                content: `{{lang.account.profile_change.edit_success}}`,
                onClose:function(){
                location.reload();
                }
              });
            } else {
              return moi.alert({ title: data.msg });
            }
          }
        })
      }

    });
  })();
</script>